<div class="one-notbreadcrumb one-map-container one-map-peach-container">
  <!--<div class="one-peach-site-toggle-large" (click)="unfoldSiteDetail($event)" style="display: none;"></div>-->
  <div class="one-peach-site-detail">
    <div class="one-peach-site-header">
      <div class="one-peach-site-name">
        <span class="">郑州</span>
        <span class="one-peach-site-toggle" (click)="shrinkSiteDetail($event)"></span>
      </div>
      <div class="one-peach-site-AQI text-center">
        <span class="one-text-huge">{{cityRealAQI}}</span>
        <span [class]="'one-bg-level'+this.aqiLevel(cityRealAQI)+ ' text-center'">AQI</span>
      </div>
      <div class="one-peach-site-ranking">
        <div class="text-center one-peach-site-ranking-title">
          <span>在74城市中的排名</span>
          <span class="fa fa-exchange" title="正序/倒序" (click)="changeOrderMethod()"
                style="cursor: pointer;transform: rotate(90deg);"></span>
        </div>
        <div class="one-peach-ranking-border" style="margin: 0 10px;"></div>
        <div class="one-peach-site-ranking-detail">
          <ul class="list-inline">
            <li>
              <div>{{cityRanking.compositeRank}}</div>
              <div>实时AQI排序</div>
            </li>
            <li>
              <div>{{cityRanking.dayRank}}</div>
              <div>昨日综指排序</div>
            </li>
            <li>
              <div>{{cityRanking.monthRank}}</div>
              <div>当月累计排序</div>
            </li>
            <li>
              <div>{{cityRanking.yearRank}}</div>
              <div>当年累计排序</div>
            </li>
          </ul>
        </div>
      </div>
      <!--各个站点占比-->
      <div class="one-peach-count-chart one-hide">
        <div class="one-peach-ranking-header">
          <span>站点类型</span>
        </div>
        <div class="one-peach-ranking-border"></div>
        <div id="one-peach-count-chart" style="width: 280px;height: 280px;"></div>
      </div>
    </div>
    <!--国控站排名-->
    <div class="one-peach-ranking">
      <div class="one-peach-ranking-header">
        <span>实时监测排名</span>
      </div>
      <div class="one-peach-ranking-border"></div>
      <div class="one-peach-ranking-list">
        <div class="one-peach-list-header">
          <ul class="list-inline">
            <li class="one-peach-list-ranking">名次</li>
            <li class="one-peach-list-name">监测站点</li>
            <li class="one-peach-list-factor" (mouseleave)="dropDownHide($event)">
              <span (click)="dropDownClick($event)">{{listName}}</span>
              <p class="one-peach-triangle" style="top: 8px;z-index: 11;display: none;"></p>
              <ul class="one-peach-dropdown-menu" style="top: 24px;">
                <li *ngFor="let factor of factorData;index as i">
                  <label>
                    <input type="radio" class="one-hide" [checked]="i==0" name="factor">
                    <span class="one-radio-text one-radio-blue" (click)="factorTypeClick(factor,$event)">{{factor.name}}</span>
                  </label>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="one-peach-list-body">
          <ul class="list-inline" *ngFor="let site of siteCacheArr;index as i;">
            <li class="one-peach-list-ranking one-bg-level-default">{{i+1}}</li>
            <li class="one-peach-list-name" >{{site.siteName}}</li>
            <li class="one-peach-list-progress" *ngIf="site.factor != 'wind'">
              <span [class] = "site.className" [style.width]="site.activeNum/siteCacheArr[0].activeNum*90+'px'"></span>
            </li>
            <li class="one-peach-list-value" *ngIf="site.factor != 'wind'">{{site.activeNum}}</li>
            <li class="one-peach-list-value" *ngIf="site.factor == 'wind'">{{site.windDirection}}{{site.activeNum}}级</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!--点位信息图例-->
  <div class="one-peach-factorLegend one-bg-level1">
    <ul class="list-unstyled">
      <li *ngFor="let listType of listTypeArr"><span [class]="'one-icon-'+listType.pointType">{{listType.name}}</span></li>
      <li *ngFor="let carType of carTypeArr"><span *ngIf="carType.deviceCode>0">{{carType.deviceType}}</span></li>
    </ul>
  </div>
  <!--搜索及各种工具-->
  <div class="one-peach-detail">
    <!--搜索-->
    <div class="one-peach-search one-peach-dropdown mapSearch" (mouseleave)="mouseLeaveSelect($event)">
      <form [formGroup]="siteSearchForm" style="position: relative;z-index: 5;">
        <input type="text" class="form-control" placeholder="请输入要查询的站点" formControlName="siteName" #siteSearchName
               (click)="siteNameFocus($event)"  (keydown)="keyUpOrDown($event)">
        <!--<span class="fa fa-close"></span> -->
      </form>
      <p class="one-peach-triangle" style="top: 19px;z-index: 11;display: none;"></p>
      <ul class="one-peach-dropdown-menu">
        <li *ngFor="let siteSearch of siteSearchArr;index as i" [class.active]="activeSiteCode == siteSearch.siteCode" (click)="selectSearchSite(siteSearch)">
          <label>
            <span class="one-radio-text">{{siteSearch.siteName}}</span>
          </label>
        </li>
      </ul>
    </div>
    <!--热力图日期-->
    <div class="one-peach-search one-peach-dropdown one-hide heatMapDate">
      <input type="text" class="form-control" id="heatMapDate">
    </div>
    <!--工具-->
    <div class="one-peach-dropdown-container">
      <ul class="one-peach-dropdown">
        <li class="one-drop" (mouseleave)="dropDownHide($event)" *ngIf="mapType == 'map'">
          <span (click)="dropDownClick($event)">{{listTypeName}}</span>
          <p class="one-peach-triangle" style="top: 19px;z-index: 11;display: none;"></p>
          <ul class="one-peach-dropdown-menu">
            <li *ngFor="let content of listTypeArr;index as i" >
              <label>
                <input type="checkbox" class="one-hide" [checked]="i==0" [disabled]="i==0">
                <span class="one-check-box-text one-check-box-blue" (click)="sitePointClick(content,$event)">{{content.name}}</span>
              </label>
            </li>
          </ul>
        </li>
        <li class="one-drop"  (mouseleave)="dropDownHide($event)">
          <span (click)="dropDownClick($event)">分析地图</span>
          <p class="one-peach-triangle" style="top: 19px;z-index: 11;display: none;"></p>
          <ul class="one-peach-dropdown-menu">
            <li>
              <label>
                <input type="radio" class="one-hide" name="mapType" checked >
                <span class="one-radio-text one-radio-blue" (click)="mapTypeRadioClick('map',$event)">站点地图</span>
              </label>
            </li>
            <li>
              <label>
                <input type="radio" class="one-hide" name="mapType">
                <span class="one-radio-text one-radio-blue" (click)="mapTypeRadioClick('heatMap',$event)">热力成像</span>
              </label>
            </li>
          </ul>
        </li>
        <li [class.active]="isTraffic" style="padding: 0;">
          <span (click)="trafficBtnClick()" style="padding: 5px 0;">路况</span>
          <span class="fa fa-refresh" style="position: absolute;right: 8px;width: 12px;line-height: 32px;" (click)="refreshTraffic()" title="刷新"></span>
        </li>
        <li class="one-drop"  (mouseleave)="dropDownHide($event)">
          <span (click)="dropDownClick($event)">工具</span>
          <p class="one-peach-triangle" style="top: 19px;z-index: 11;display: none;"></p>
          <ul class="one-peach-dropdown-menu">
            <li (mouseleave)="dropDownHide($event)">
              <label>
                <span class="one-check-box-text text-center" (click)="distanceTool($event)">测距</span>
              </label>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <!-- 热力图时间线 -->
  <div class="one-heatMap-container one-hide" style="bottom: 60px;z-index: 100;">
    <ul class="one-time-line">
      <li class="one-time-play" (click)=" playOrPauseHotInterval(intervalStrart) " #intervalStrart>
        <i class="fa fa-play"></i>
      </li>
      <li class="one-time-item" *ngFor="let date of dateArray;index as i;" [class.active] = "selectDate == date"
          [title]="date" (click)="clickHotTimeLine(date,dateLine)" #dateLine></li>
    </ul>
  </div>
  <!-- 地图容器-->
  <div id="realTimeMap" class="one-map-container one-map-peach-container"></div>
  <!--地图自定义控制器-->
  <div class="one-site-control" *ngIf="isNormalMap">
    <!--框选-->
    <div class="one-peach-region" style="bottom: 160px;" (click)="regionAreaClick()">框选</div>
    <!-- 直观/普通-->
    <ul class="list-inline one-peach-intuition">
      <li class="active" (click)="showSiteName('normal',normal)" #normal>普通</li>
      <li (click)="showSiteName('showName',showName)" #showName>直观</li>
    </ul>
    <!--缩放-->
    <ul class="one-map-zoom">
      <li (click)="zoomIn()">+</li>
      <li (click)="zoomOut()">-</li>
    </ul>
    <!-- 污染物因子图例-->
    <div class="one-pollute-factor-legend">
      <ul class="list-unstyled">
        <li *ngFor="let level of factorLegendObj.factorClass;index as i;" [class]="level">
          <div *ngIf="selectorFactor == 'AQI'">{{factorLegendObj.note[i]}}</div>
          <div>{{factorLegendObj.factorName[i]}}</div>
        </li>
      </ul>
    </div>
    <!-- 污染物因子-->
    <div class="btn-group one-peach-factor">
      <div class="btn btn-default" *ngFor="let factor of factorData;" [class.active] = "factor.factorName == selectorFactor" (click)="factorTypeClick(factor,$event)">{{factor.name.split("实时")[1] || factor.name.split("实时")[0]}}</div>
    </div>
  </div>
  <!--框选区域内站点详情-->
  <div class="one-map-selected-area" *ngIf = 'isSelectedArea' >
    <div class="box box-solid box-success">
      <div class="box-header with-border">
        <h3 class="box-title">框选区域站点信息</h3>
        <div class="box-tools">
          <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times" (click)="clearSelectAreaData()"></i>
          </button>
        </div>
      </div>
      <div class="box-body">
        <div class="box box-solid collapsed-box" *ngIf = 'selectAreaData.industrySite.length>0'>
          <div class="box-header with-border">
            <h3 class="box-title">工业源</h3>
            <div class="box-tools">
              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
              </button>
            </div>
          </div>
          <div class="box-body no-padding" style="max-height: 300px;overflow: auto; ">
            <table class="table table-striped" style="width: 572px;">
              <thead>
                <tr>
                  <th style="width: 300px;">名称</th>
                  <th style="width: 80px;">烟尘</th>
                  <th style="width: 80px;">SO<sub>2</sub></th>
                  <th style="width: 80px;">NO<sub>X</sub></th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let industryData of selectAreaData.industrySite;">
                  <td [title]="industryData.siteName"><span style="width: 300px;display:inline-block;overflow: hidden;text-overflow:ellipsis;">{{industryData.siteName}}</span></td>
                  <td style="width: 80px;">{{industryData.AvgStrength001}}</td>
                  <td style="width: 80px;">{{industryData.AvgStrength002}}</td>
                  <td style="width: 80px;">{{industryData.AvgStrength003}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="box box-solid collapsed-box" *ngIf = 'selectAreaData.raiseDustNewSite.length>0'>
          <div class="box-header with-border">
            <h3 class="box-title">工地</h3>
            <div class="box-tools">
              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
              </button>
            </div>
          </div>
          <div class="box-body no-padding" style="max-height: 300px;overflow: auto; ">
            <table class="table table-striped" style="width: 572px;">
              <thead>
              <tr>
                <th style="width: 300px;">名称</th>
                <th style="width: 100px;">PM2.5</th>
                <th style="width: 100px;">PM10</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let raiseData of selectAreaData.raiseDustNewSite;">
                <td [title]="raiseData.siteName"><span style="width: 300px;display:inline-block;overflow: hidden;text-overflow:ellipsis;">{{raiseData.siteName}}</span></td>
                <td style="width: 100px;">{{raiseData.PM2_5}}</td>
                <td style="width: 100px;">{{raiseData.PM10}}</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="box box-solid collapsed-box"  *ngIf = 'selectAreaData.movingSource.length>0'>
          <div class="box-header with-border">
            <h3 class="box-title">移动源</h3>
            <div class="box-tools">
              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
              </button>
            </div>
          </div>
          <div class="box-body no-padding" style="max-height: 300px;overflow: auto; ">
            <table class="table table-striped" style="width: 572px;">
              <thead>
                <tr>
                  <th style="width: 300px;">车辆名称</th>
                  <th style="width: 100px;">车辆类型</th>
                  <th style="width: 100px;">所属公司</th>
                </tr>
              </thead>
              <tbody>
              <tr *ngFor="let carData of selectAreaData.movingSource;">
                <td><span style="width: 100px;display:inline-block;overflow: hidden;text-overflow:ellipsis;">{{carData.deviceName}}</span></td>
                <td style="width: 100px;">{{carData.deviceType}}</td>
                <td [title]="carData.companyName"><span style="width: 300px;display:inline-block;overflow: hidden;text-overflow:ellipsis;">{{carData.companyName}}</span></td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 正在加载 -->
  <div class="one-data-loadState-nomodal" *ngIf="isLoading" style="display: block;"></div>
  <!--<div class="one-peach-info" style="display: none;">-->
    <!--<div class="one-peach-info-header">-->
      <!--<span>四十一中</span>-->
      <!--<span class="text-sm">2017-08-10 17:10</span>-->
    <!--</div>-->
    <!--<div class="one-peach-info-body">-->
      <!--<div class="one-peach-info-content">-->
        <!--<div class="one-peach-info-content-header"><span>AQI：100</span><span class="one-bg-level1 text-center">100</span>-->
        <!--<span class="one-peach-info-alert"></span>-->
        <!--</div>-->
        <!--<div class="one-peach-info-content-body">-->
          <!--<ul class="list-inline one-peach-content-factor">-->
            <!--<li>-->
              <!--<div>PM2.5</div>-->
              <!--<div><span class="one-bg-level${this.aqiLevel(dataObj.pm25IAQI)}"></span><span>100</span></div>-->
            <!--</li>-->
            <!--<li>-->
              <!--<div>PM10</div>-->
              <!--<div><span class="one-bg-level${this.aqiLevel(dataObj.pm10IAQI)}"></span><span>100</span></div>-->
            <!--</li>-->
            <!--<li>-->
              <!--<div>NO<sub>2</sub></div>-->
              <!--<div><span class="one-bg-level${this.aqiLevel(dataObj.no2IAQI)}"></span><span>100</span></div>-->
            <!--</li>-->
            <!--<li>-->
              <!--<div>SO<sub>2</sub></div>-->
              <!--<div><span class="one-bg-level${this.aqiLevel(dataObj.so2IAQI)}"></span><span>100</span></div>-->

            <!--</li>-->
            <!--<li>-->
              <!--<div>CO</div>-->
              <!--<div><span class="one-bg-level${this.aqiLevel(dataObj.coIAQI)}"></span><span>100</span></div>-->
            <!--</li>-->
            <!--<li>-->
              <!--<div>O<sub>3</sub></div>-->
              <!--<div><span class="one-bg-level${this.aqiLevel(dataObj.o3IAQI)}"></span><span>100</span></div>-->
            <!--</li>-->
          <!--</ul>-->
          <!--<ul class="list-inline one-peach-content-weather">-->
            <!--<li>-->
              <!--<div>温度：10 &degC</div>-->
            <!--</li>-->
            <!--<li>-->
              <!--<div>湿度：10%</div>-->
            <!--</li>-->
            <!--<li>-->
              <!--<div>风力风向：东南风2级</div>-->
            <!--</li>-->
          <!--</ul>-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="text-center" style="margin:5px 0;">近2小时污染数据</div>-->
      <!--<div class="one-peach-info-chart">-->
        <!--<div id="siteDataChart" style="width: 340px;height: 180px;"></div>-->
      <!--</div>-->
    <!--</div>-->
    <!--<div class="one-peach-info-alert-content">-->
      <!--<ul class="one-peach-info-alert-detail">-->
        <!--<li>-->
          <!--<div>2017-08-10 17:40</div>-->
          <!--<div>-->
            <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum delectus dolor, est in ipsum nemo quia quos voluptates?-->
          <!--</div>-->
        <!--</li>-->
        <!--<li>-->
          <!--<div>2017-08-10 17:40</div>-->
          <!--<div>-->
            <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum delectus dolor, est in ipsum nemo quia quos voluptates?-->
          <!--</div>-->
        <!--</li>-->
        <!--<li>-->
          <!--<div>2017-08-10 17:40</div>-->
          <!--<div>-->
            <!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum delectus dolor, est in ipsum nemo quia quos voluptates?-->
          <!--</div>-->
        <!--</li>-->
      <!--</ul>-->
      <!--<div style="width:100%;text-align: center;">-->
        <!--<button class="btn one-peach-info-loadmore">更多数据</button>-->
      <!--</div>-->
    <!--</div>-->
  <!--</div>-->
</div>
